<template>
  <div class='container'>
    <el-dialog
      title="题目预览"
      :visible="isShowDialog"
      @close="close"
      >
      <el-row>
        <el-col :span="6"><span>【题型】：{{ listDetail.questionType | qs }}</span></el-col>
        <el-col :span="6"><span>【编号】：{{listDetail.number}}</span></el-col>
        <el-col :span="6"><span>【难度】：{{ listDetail.difficulty | dl }}</span></el-col>
        <el-col :span="6"><span>【标签】：{{listDetail.tags}}</span></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"><span>【学科】：{{listDetail.subjectName}}</span></el-col>
        <el-col :span="6"><span>【目录】：{{listDetail.directoryName}}</span></el-col>
        <el-col :span="6"><span>【方向】：{{listDetail.direction}}</span></el-col>
        <el-col :span="6"><span></span></el-col>
      </el-row>
      <hr>
      【题干】：
      <div style="color: blue;">
        <p v-html="listDetail.question"></p>
      </div>
      <div>
        <p>{{ listDetail.questionType | qs  }}题 选项：（以下选中的选项为正确答案）</p>
        <div v-if="listDetail.questionType === '1'">
          <div v-for="item in listDetail.options" :key="item.id">
            <el-radio :value="item.isRight" :label="1">{{item.title}}</el-radio>
          </div>
        </div>
        <div v-if="listDetail.questionType === '2'">
          <div v-for="item in listDetail.options" :key="item.code">
            <el-checkbox :value="item.isRight? true : false">{{ item.title }}</el-checkbox> <br>
          </div>
        </div>
      </div>
      <hr>
      【参考答案】：
      <el-button type="danger" size="small" @click="isShow = true">视频答案预览</el-button>
      <div v-if="isShow">
        <video :src="listDetail.videoURL" controls width="400" height="300"></video>
      </div>
      <hr>
      【答案解析】：
      <div style="display:inline-block">
        <p v-html="listDetail.answer"></p>
      </div>
      <hr>
      【题目备注】：{{listDetail.remarks}}
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="close">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { questionType, difficulty } from '@/api/hmmm/constants'
import { detail } from '@/api/hmmm/questions'
export default {
  name: 'preview',
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    },
    currentId: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      isShow: false,
      questionType: questionType,
      difficulty: difficulty,
      listDetail: {} // 题组详情列表
    }
  },
  created () {
    this.open()
  },
  methods: {
    // 关闭预览窗口执行
    close () {
      this.$emit('update:isShowDialog', false)
      this.listDetail = {}
    },
    // 页面渲染获取数据详情
    async open () {
      const data = await detail({ id: this.currentId })
      // console.log(data)
      this.listDetail = data.data
    }
  },
  filters: {
    // 过滤题型
    qs (value) {
      if (value) return questionType.find(item => item.value === +value).label
    },
    // 过滤难度
    dl (value) {
      if (value) return difficulty.find(item => item.value === +value).label
    }
  }
}
</script>

<style scoped lang='scss'>
  .el-col-6 {
    padding: 10px;
  }
  .el-radio {
    padding: 8px;
  }
  .el-checkbox {
    padding: 8px;
  }
</style>
